<template>
  <div class="">
    <!-- 电脑背景 -->
    <div class="dnbjbox" v-if="eritems == 3">
      <img src="@/images/dnbj.png" alt="" class="dnbjboximg" />
      <!-- 工作站图标 -->
      <div class="dniconbox" @click="loginshow = true">
        <img src="@/images/dnicon.png" alt="" class="dnicon" />
        <span>工作站</span>
      </div>
      <!-- 登录框 -->
      <div class="loginbox" v-if="loginshow">
        <div class="logintopbox">Login</div>
        <div class="loginmainbox">
          <div class="userbox">
            <img src="@/images/user.png" alt="" class="usera" />
            <el-input v-model="user" placeholder="请输入账号"></el-input>
          </div>
          <div class="pwdbox">
            <img src="@/images/pwd.png" alt="" class="pwda" />
            <el-input
              v-model="pwd"
              placeholder="请输密码"
              show-password
            ></el-input>
          </div>
          <div class="tool loginan" @click="login">
            <img src="@/images/qd.png" alt="" class="normal" />
            <img src="@/images/qdac.png" alt="" class="active" />
          </div>
        </div>
      </div>
    </div>
    <!-- 工作站 -->
    <div
      class="gzsbox"
      v-if="
        eritems == 4 ||
        eritems == 5 ||
        eritems == 5.1 ||
        eritems == 5.2 ||
        eritems == 5.3 ||
        (eritems == 8 && sjstep == 2) ||
        eritems == 8.1 ||
        eritems == 8.2 ||
        eritems == 8.3 ||
        eritems == 8.5 ||
        eritems == 8.6 ||
        eritems == 8.8 ||
        eritems == 8.81 ||
        eritems == 8.82 ||
        eritems == 8.821 ||
        eritems == 8.822 ||
        eritems == 8.9 ||
        eritems == 8.91 ||
        eritems == 8.92 ||
        eritems == 8.72 ||
        eritems == 8.721 ||
        eritems == 8.722 ||
        eritems == 9.02 ||
        eritems == 9.1 ||
        eritems == 9.4 ||
        eritems == 9.41 ||
        eritems == 9.42 ||
        eritems == 8.7 ||
        eritems == 8.71 ||
        eritems == 9.43 ||
        eritems == 9.44 ||
        eritems == 9.45 ||
        eritems == 9.46 ||
        eritems == 9.8 ||
        eritems == 9.81 ||
        eritems == 10.1 ||
        eritems == 10 ||
        eritems == 10.2 ||
        eritems == 10.21 ||
        eritems == 10.22 ||
        eritems == 10.23 ||
        eritems == 10.24 ||
        eritems == 10.25 ||
        eritems == 10.26 ||
        eritems == 10.27 ||
        eritems == 10.6 ||
        eritems == 10.61 ||
        eritems == 12 ||
        eritems == 12.1 ||
        eritems == 12.2 ||
        eritems == 12.3 ||
        eritems == 12.31 ||
        eritems == 12.32 ||
        eritems == 12.4 ||
        eritems == 12.41 ||
        eritems == 12.42 ||
        eritems == 13 ||
        eritems == 13.1 ||
        eritems == 13.2
      "
    >
      <!-- 定标结果界面 8.92 -->
      <div class="dbjgbox" v-if="eritems == 8.92">
        <div class="dbtbox">
          <img src="@/images/dbtc.png" alt="" />
          <div class="Cancel tm" @click="eritemfn(9)">Cancel</div>
        </div>
      </div>

      <div class="stopanz" v-if="eritems == 12.31"></div>
      <img
        src="@/images/stops.png"
        alt=""
        class="stopan"
        ref="stopan"
        v-if="eritems == 12.31"
        @click="eritems = 12.32"
      />
      <div class="logff" v-if="eritems == 13.2"></div>
      <img
        src="@/images/logff.png"
        alt=""
        class="logff tm"
        v-if="eritems == 13.2"
        @click="logfns"
      />
      <div
        class="gzybox"
        v-if="
          eritems == 10 ||
          eritems == 10.1 ||
          eritems == 10.2 ||
          eritems == 10.21 ||
          eritems == 10.22 ||
          eritems == 10.23 ||
          eritems == 10.24 ||
          eritems == 10.25 ||
          eritems == 10.26 ||
          eritems == 10.27 ||
          eritems == 10.6
        "
      >
        <img src="@/images/101.png" alt="" class="gzzimg" />
        <div class="onebox">
          <div class="onelbox">
            S.Type：
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="onerbox" ref="SampleID">
            <span>Sample ID：</span
            ><el-input v-model="SampleID" @focus="focusfn"></el-input>
          </div>
        </div>
        <div class="twobox">
          <div class="Samplebox">
            Sample

            <div>
              <el-radio v-model="radio" label="1">Calibrator</el-radio>
            </div>
            <div>
              <el-radio v-model="radio" label="2">Start</el-radio>
            </div>
          </div>
          <div class="Sequencebox" ref="Sequencebox">
            Sequence No.
            <el-input v-model="Sequence" @focus="focusfn"></el-input>
          </div>
          <div class="Rack" ref="Rack">
            Rack No.
            <el-input v-model="Rack" @focus="focusfn"></el-input>
          </div>
          <div class="POS" ref="POS">
            POS.
            <el-input v-model="POS" @focus="focusfn"></el-input>
          </div>
          <div class="Pre-dilution">
            <el-checkbox v-model="checked">Pre-dilution</el-checkbox>
          </div>
          <div class="SampleCup">
            Sample Cup
            <div class="SampleCupbox">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="SampleVolume">
            Sample Volume/Dilution
            <div class="SampleCupbox">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="seebox">
          <div>Sample Status:</div>
          <div class="seecd">
            <div
              class="seeitem"
              :class="seeitemid == item.id ? 'seeitems' : ''"
              v-for="item in seedata"
              :key="item.id"
              @click="seeitemid = item.id"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="fourbox" v-if="seeitemid == 2">
          <div class="fouritem">LPA2</div>
          <div class="fouritem">CK</div>
          <div class="fouritem">CKMB</div>
          <div class="fouritem">HBDH2</div>
          <div class="fouritem">CRPL3</div>
          <div class="fouritem">RF-II</div>
          <div class="fouritem">ASLOT</div>
          <div class="fouritem">UA2</div>
          <div class="fouritem">AMY-P</div>
          <div class="fouritem">LIPC</div>
          <div class="fouritem">C3C-2</div>
          <div class="fouritem">C4-2</div>
          <div class="fouritem">IGG-2</div>
          <div class="fouritem">IOA-2</div>
          <div class="fouritem">IOM-2</div>
          <div class="fouritem">Cysc</div>
          <div class="fouritem">IRON2</div>
          <div class="fouritem">PHOS2</div>
          <div class="fouritem">MQ-2</div>
          <div class="fouritem">Zn</div>
          <div class="fouritem">Lpa-Z</div>
          <div class="fouritem">C2C-2</div>
          <div class="fouritem">CRPH5</div>
          <div class="fouritem">NCFA</div>
          <div class="fouritem">
            MYSH
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            WLYS
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            YXSH
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            TJ1
            <div class="pro"></div>
          </div>
          <div class="fouritem" ref="S3" @click="eritems = 10.23">
            S3
            <div class="pro"></div>
          </div>
        </div>
        <div class="fourbox" v-if="seeitemid == 1">
          <div class="fouritem">TP2</div>
          <div class="fouritem">ALB2</div>
          <div class="fouritem">ALTL</div>
          <div class="fouritem">ASTL</div>
          <div class="fouritem">GOTI2</div>
          <div class="fouritem">ALPZL</div>
          <div class="fouritem">LDHI2</div>
          <div class="fouritem">BILT3</div>
          <div class="fouritem">DILD2</div>
          <div class="fouritem">TBK</div>
          <div class="fouritem">K</div>
          <div class="fouritem">NA</div>
          <div class="fouritem">CI</div>
          <div class="fouritem">CA2</div>
          <div class="fouritem">COZ-L</div>
          <div class="fouritem">UREAL</div>
          <div class="fouritem">CREA2</div>
          <div class="fouritem" ref="GLUC3" @click="eritems = 10.24">GLUC3</div>
          <div class="fouritem">TRIGL</div>
          <div class="fouritem">GHOZI</div>
          <div class="fouritem">HDLC3</div>
          <div class="fouritem">LDLO3</div>
          <div class="fouritem">APOAT</div>
          <div class="fouritem">APCBT</div>
          <div
            class="fouritem"
            ref="G11"
            @click="eritems = 10.22"
            v-if="eritems == 10.21"
          >
            G11
            <div class="pro"></div>
          </div>
          <div
            class="fouritem"
            ref="G11"
            @click="eritems = 10.25"
            v-if="eritems == 10.24"
          >
            G11
            <div class="pro"></div>
          </div>
          <div
            class="fouritem"
            ref="G11"
            @click="eritems = 10.26"
            v-if="eritems == 10.25"
          >
            G11
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            D8
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            XJMP
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            XZ100
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            TNBSH
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            TTSH
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            XZS
            <div class="pro"></div>
          </div>
          <div class="fouritem">
            G1
            <div class="pro"></div>
          </div>
        </div>
        <div class="fivebox">
          <div class="fiveitem">Sample Information</div>
          <div class="fiveitem fiveitems">Barcode ReadError</div>
          <div class="fiveitem fiveitems">Rerun Rack Assignment</div>
          <div class="fiveitem" @click="repeatfn" ref="Repeat">Repeat</div>
          <div class="fiveitem">Previous</div>
          <div class="fiveitem fiveitems">Next</div>
          <div class="fiveitem" ref="saves" @click="eritems = 10.27">Save</div>
        </div>
      </div>
      <img
        src="@/images/gzzbg.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 4 || eritems == 5 || eritems == 5.1"
      />
      <img
        src="@/images/gz51.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 5.2"
      />
      <img
        src="@/images/gz106.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 10.61"
      />
      <img
        src="@/images/gz121.png"
        alt=""
        v-if="
          eritems == 12 ||
          eritems == 12.1 ||
          eritems == 12.2 ||
          eritems == 12.3 ||
          eritems == 12.31 ||
          eritems == 12.32 ||
          eritems == 12.4 ||
          eritems == 12.41 ||
          eritems == 12.42 ||
          eritems == 13 ||
          eritems == 13.1 ||
          eritems == 13.2
        "
        class="gzzimg"
      />
      <img
        src="@/images/gz53.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 5.3 || (eritems == 8 && sjstep == 2)"
      />
      <img
        src="@/images/gz81.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 8.1"
      />
      <img
        src="@/images/gz82.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 8.2"
      />
      <img
        src="@/images/gz851.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 8.5"
      />
      <img
        src="@/images/gz861.png"
        alt=""
        class="gzzimg"
        v-if="
          eritems == 8.6 ||
          eritems == 8.72 ||
          eritems == 8.721 ||
          eritems == 8.722 ||
          eritems == 8.7 ||
          eritems == 8.71
        "
      />
      <img
        src="@/images/gz86.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 8.8"
      />
      <img
        src="@/images/gz81.png"
        alt=""
        class="gzzimg"
        v-if="
          eritems == 8.81 ||
          eritems == 8.82 ||
          eritems == 8.821 ||
          eritems == 8.822 ||
          eritems == 8.9 ||
          eritems == 8.91 ||
          eritems == 8.92
        "
      />
      <img
        src="@/images/gz85.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 9.44"
      />
      <img
        src="@/images/gz85ac.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 9.45 || eritems == 9.46 || eritems == 9.8"
      />
      <img
        src="@/images/gz89.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 9.81"
      />
      <img
        src="@/images/gz91.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 9.02 || eritems == 9.4"
      />
      <img
        src="@/images/gz911.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 9.1"
      />
      <img
        src="@/images/gz941.png"
        alt=""
        class="gzzimg"
        v-if="eritems == 9.41 || eritems == 9.42 || eritems == 9.43"
      />
      <img src="@/images/zsjt.png" alt="" class="zsjt tm" v-if="eritems == 4" />
      <img
        src="@/images/zsjt.png"
        alt=""
        class="zsjts tm"
        v-if="eritems == 5"
      />
      <div
        class="xlbox"
        @click="eritems = 8.82"
        v-if="eritems == 8.81 || eritems == 8.821"
      >
        <img src="@/images/xl.png" alt="" />
      </div>
      <div class="xlxbox" v-if="eritems == 8.82">
        <div
          class="xltop"
          :class="xlid == 1 ? 'xltops xltop' : 'xltop'"
          @click=";(xlid = 1), (eritems = 8.821)"
        >
          None
        </div>
        <div
          class="xlbo"
          :class="xlid == 2 ? 'xlbos xlbo' : 'xlbo'"
          @click=";(xlid = 2), (eritems = 8.821)"
        >
          2Point
        </div>
      </div>
      <div class="Nod" v-if="xlid == 1">None</div>
      <div class="Poi" v-if="xlid == 2">2Point</div>
      <!-- 选中要选中的项目 -->
      <div class="xzbox" v-if="eritems == 8.9" @click="eritems = 8.91"></div>
      <!--  Reagent按钮-->
      <div class="Reagent tm" v-if="eritems == 5.1" @click="eritems = 5.2">
        Reagent
      </div>
      <!--  Reagent按钮-->
      <div
        class="Calibration tm"
        v-if="eritems == 8 && sjstep == 2"
        @click="eritems = 8.1"
      >
        Calibration
      </div>
      <!-- Status 按钮 -->
      <div class="Status tm" v-if="eritems == 5.2" @click="eritems = 5.3">
        Status
      </div>
      <!-- Status 按钮 -->
      <div class="Statusd tm" v-if="eritems == 9.43" @click="eritems = 9.44">
        Status
      </div>
      <!-- Status 按钮 -->
      <div class="RunStatus tm" v-if="eritems == 9.8" @click="eritems = 9.81">
        RunStatus
      </div>
      <!-- Status 按钮 -->
      <div
        class="TestSelection tm"
        v-if="eritems == 10"
        @click="eritems = 10.1"
      >
        TestSelection
      </div>
      <div
        class="DataReview tm"
        v-if="eritems == 10.6"
        @click="eritems = 10.61"
      >
        DataReview
      </div>
      <div class="DataReview tm" v-if="eritems == 12" @click="eritems = 12.1">
        Maintenance
      </div>
      <div class="TestSelection" v-if="eritems == 10.1">TestSelection</div>
      <!-- Install 按钮 -->
      <div class="Install tm" v-if="eritems == 8.1" @click="eritems = 8.2">
        Install
      </div>
      <!-- Install 按钮 -->
      <div class="Installs tm" v-if="eritems == 9.02" @click="eritems = 9.1">
        Install
      </div>
      <!-- Controls 按钮 -->
      <div class="Calibration tm" @click="eritems = 8.6" v-if="eritems == 8.5">
        Calibration
      </div>
      <!-- Controls 按钮 -->
      <div class="Controls tm" @click="eritems = 9.41" v-if="eritems == 9.4">
        Controls
      </div>
      <!-- Status 按钮 -->
      <div class="Statuss tm" v-if="eritems == 8.8" @click="eritems = 8.81">
        Status
      </div>
      <!-- Download 按钮 -->
      <div class="Download tm" v-if="eritems == 8.2" @click="eritems = 8.3">
        Download
      </div>
      <!-- Download 按钮 -->
      <div class="RackAssing tm" v-if="eritems == 8.6" @click="eritems = 8.7">
        RackAssing
      </div>
      <!-- Download 按钮 -->
      <div
        class="RackAssings tm"
        v-if="eritems == 9.41"
        @click="eritems = 9.42"
      >
        RackAssing
      </div>
      <!-- Download 按钮 -->
      <div class="Save tm" v-if="eritems == 8.822" @click="sjstepfn(5)">
        Save
      </div>
      <!-- <div class="Save tm" v-if="eritems == 8.822" @click="eritems = 8.823">
        Save
      </div> -->
      <!-- save 按钮 -->

      <div class="Saved1" v-if="eritems == 9.45" @click="eritems = 9.46">
        Save
      </div>
      <div class="Saved tm" v-if="eritems == 9.45" @click="eritems = 9.46">
        Save
      </div>
      <!-- Downlod -->
      <div class="Downloadd tm" v-if="eritems == 9.1" @click="eritems = 9.2">
        Download
      </div>
      <!-- CalibrationResult -->
      <div
        class="CalibrationResult tm"
        v-if="eritems == 8.91"
        @click="eritems = 8.92"
      ></div>
      <!--  -->
      <div
        class="RoutineQCAssign tm"
        v-if="eritems == 9.44"
        @click="eritems = 9.45"
      >
        Routine QC Assign
      </div>
      <!-- 分配标定液体 -->
      <div
        class="dbfpboxbig"
        v-if="
          eritems == 8.72 ||
          eritems == 8.721 ||
          eritems == 8.722 ||
          eritems == 8.7 ||
          eritems == 8.71
        "
      >
        <div class="dbfpbox">
          <div class="RackAssign">Rack Assign</div>
          <div class="Rackbox">
            <div class="Rzlbox">
              <div class="divTable">
                <div class="row">
                  <div class="cell">Control</div>
                  <div class="cell">Code</div>
                  <div class="cell">Lot ID</div>
                </div>
                <div
                  class="row"
                  :class="zid == item.id ? 'roww row' : 'row'"
                  @click=";(zid = item.id), zidfn(item.id)"
                  v-for="item in z1data"
                  :key="item.id"
                  :ref="'zrow' + item.id"
                >
                  <div class="cell">{{ item.Calibrator }}</div>
                  <div class="cell">{{ item.Code }}</div>
                  <div class="cell">{{ item.logid }}</div>
                </div>
              </div>
            </div>
            <div class="Rzjbox">
              <div class="Raddbox" @click="addfn" ref="ad">
                Add <i class="el-icon-arrow-right"></i>
              </div>
              <div class="Rmbox" @click="Removefn">
                <i class="el-icon-arrow-left"></i>Remove
              </div>
            </div>
            <div class="Rzybox">
              <div class="divTables">
                <div class="row">
                  <div class="cells">Rack No. -Pos</div>
                  <div class="cell">Calibrator</div>
                  <div class="cell">Code</div>
                  <div class="cell">Lot ID</div>
                </div>
                <div
                  class="row"
                  :class="yid == item.id ? 'row roww' : 'row'"
                  @click=";(yid = item.id), yidfn(item.id)"
                  v-for="item in ydata"
                  :key="item.id"
                  :ref="'yrow' + item.id"
                >
                  <div class="cell">{{ item.Rack }}</div>
                  <div class="cell">{{ item.Calibrator }}</div>
                  <div class="cell">{{ item.Code }}</div>
                  <div class="cell">{{ item.logid }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottomdf">
            <div class="Raddbox" @click="okfn" ref="okref">Ok</div>
            <div class="Rmbox">Cancel</div>
          </div>
        </div>
      </div>
      <!-- 分配质控页面 -->
      <div class="dbfpboxbig" v-if="eritems == 9.42">
        <div class="dbfpbox">
          <div class="RackAssign">Rack Assign</div>
          <div class="Rackbox">
            <div class="Rzlbox">
              <div class="divTable">
                <div class="row">
                  <div class="cell">Control</div>
                  <div class="cell">Code</div>
                  <div class="cell">Lot ID</div>
                </div>
                <div
                  class="row"
                  :class="zid == item.id ? 'roww row' : 'row'"
                  @click=";(zid = item.id), zidfn(item.id)"
                  v-for="item in z1data"
                  :key="item.id"
                  :ref="'zrow' + item.id"
                >
                  <div class="cell">{{ item.Calibrator }}</div>
                  <div class="cell">{{ item.Code }}</div>
                  <div class="cell">{{ item.logid }}</div>
                </div>
              </div>
            </div>
            <div class="Rzjbox">
              <div class="Raddbox" @click="addfns" ref="ad">
                Add <i class="el-icon-arrow-right"></i>
              </div>
              <div class="Rmbox" @click="Removefn">
                <i class="el-icon-arrow-left"></i>Remove
              </div>
            </div>
            <div class="Rzybox">
              <div class="divTables">
                <div class="row">
                  <div class="cells">Rack No. -Pos</div>
                  <div class="cell">Control</div>
                  <div class="cell">Code</div>
                  <div class="cell">Lot ID</div>
                </div>
                <div
                  class="row"
                  :class="yid == item.id ? 'row roww' : 'row'"
                  @click=";(yid = item.id), yidfn(item.id)"
                  v-for="item in y1data"
                  :key="item.id"
                  :ref="'yrow' + item.id"
                >
                  <div class="cell">{{ item.Rack }}</div>
                  <div class="cell">{{ item.Calibrator }}</div>
                  <div class="cell">{{ item.Code }}</div>
                  <div class="cell">{{ item.logid }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottomdf">
            <div class="Raddbox" @click="okfns" ref="okref">Ok</div>
            <div class="Rmbox">Cancel</div>
          </div>
        </div>
      </div>
      <!-- 维护界面 -->
      <div
        class="whbox"
        v-if="
          eritems == 12.1 ||
          eritems == 12.2 ||
          eritems == 12.3 ||
          eritems == 12.31 ||
          eritems == 12.4 ||
          eritems == 12.41 ||
          eritems == 12.42 ||
          eritems == 13 ||
          eritems == 13.1 ||
          eritems == 13.2
        "
      >
        <div class="whlbox">
          <div class="divTablew">
            <div class="row">
              <div class="cell cell11">No.</div>
              <div class="cell cell12">Maintenance Type</div>
            </div>
            <div
              class="row"
              :class="zids == item.id ? 'roww row' : 'row'"
              @click=";(zids = item.id), zidsfn(item.id)"
              v-for="item in wldata"
              :key="item.id"
              :ref="'zrows' + item.id"
            >
              <div class="cell cell11">{{ item.No }}</div>
              <div class="cell cell12">{{ item.Maintenance }}</div>
            </div>
          </div>
        </div>
        <div class="whrbox">
          <div class="divTablewh">
            <div class="row">
              <div class="cell cell1">No.</div>
              <div class="cell cell2">Module</div>
              <div class="cell cell3">Maintenance</div>
              <div class="cell cell4">Date/Time</div>
            </div>
            <div
              class="row"
              :class="yids == item.id ? 'roww row' : 'row'"
              @click=";(yids = item.id), yidsfn(item.id)"
              v-for="item in wrdata"
              :key="item.id"
              :ref="'yrows' + item.id"
            >
              <div class="cell1 cell">{{ item.No }}</div>
              <div class="cell2 cell">{{ item.Module }}</div>
              <div class="cell3 cell">{{ item.Maintenance }}</div>
              <div class="cell4 cell">{{ item.Data }}</div>
            </div>
          </div>
        </div>
        <div class="botbox">
          <div class="selectbox" ref="Select" @click="slefn">Select</div>
        </div>
      </div>
    </div>

    <!-- 搜素框 -->
    <div
      class="zzc"
      v-if="
        eritems == 8.3 || eritems == 8.4 || eritems == 9.2 || eritems == 9.3
      "
    >
      <!--  -->
      <div class="serchbox">
        <img
          src="@/images/gz83.png"
          alt=""
          class="gzzimgs"
          v-if="eritems == 8.3 || eritems == 9.2"
        />
        <img
          src="@/images/gz84.png"
          alt=""
          class="gzzimgs"
          v-if="eritems == 8.4 || eritems == 9.3"
        />
        <!-- Download 按钮 -->
        <div class="Search tm" v-if="eritems == 8.3" @click="eritems = 8.4">
          Search
        </div>
        <div class="Search tm" v-if="eritems == 9.2" @click="eritems = 9.3">
          Search
        </div>
        <!-- Download 按钮 -->
        <div
          class="Downloads tm"
          v-if="eritems == 8.4"
          @click=";(eritems = 8.5), sjstepfn(3)"
        >
          Download
        </div>
        <div
          class="Downloads tm"
          v-if="eritems == 9.3"
          @click=";(eritems = 9.4), sjstepfn(3)"
        >
          Download
        </div>
        <!-- 搜索框 -->
        <el-input v-model="serch" placeholder="请输入C001"></el-input>
      </div>
    </div>

    <!-- 完成弹窗提示 -->
    <!-- <div class="dilogbox" v-if="dltext != ''"></div> -->
    <div class="dldesbox" v-if="dltext != ''">
      {{ dltext }}
      <div class="tool djxbox" @click="dlbot">
        <img src="@/images/djx.png" alt="" class="normal" />
        <img src="@/images/djxac.png" alt="" class="active" />
      </div>
    </div>
    <!--步骤提示 -->
    <bz-tip :bztext="bztext" v-if="bztext != ''" />
    <!-- 文字提示框 -->
    <right-tips :tipstext="tipstext" v-if="tipstext != ''" />
    <!-- 错误提醒 -->
    <error-tips :errortext="errortext" v-if="errortext != ''" />
  </div>
</template>

<script>
import BzTip from './bzTip.vue'
import ErrorTips from './errorTips.vue'
import RightTips from './rightTips.vue'
export default {
  props: {
    eritem: {
      default: 1, //二级菜单
      String
    },
    sjstep: {
      default: 1, //三级菜单
      String
    },
    sjname: {
      default: '',
      String
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: { BzTip, RightTips, ErrorTips },
  data() {
    //这里存放数据
    return {
      serch: '',
      errortext: '',
      user: '',
      pwd: '',
      loginshow: false,
      bztext: '',
      eritems: '',
      dltext: '',
      tipstext: '',
      timer: '',
      zid: 0,
      yid: 0,
      xlid: 0,
      zdata: [
        {
          id: 1,
          Calibrator: 'ISELOW',
          Code: '00201',
          logid: 'C001'
        },
        {
          id: 2,
          Calibrator: 'ISELOW',
          Code: '00202',
          logid: 'C001'
        },
        {
          id: 3,
          Calibrator: 'ISELOW',
          Code: '00203',
          logid: 'C001'
        },
        {
          id: 4,
          Calibrator: 'ISELOW',
          Code: '00204',
          logid: 'C001'
        },
        {
          id: 5,
          Calibrator: 'ISELOW',
          Code: '00205',
          logid: 'C001'
        }
      ],
      ydata: [
        {
          id: 1,
          Rack: 'C20001-1',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 2,
          Rack: 'C20001-2',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 3,
          Rack: 'C20001-3',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 4,
          Rack: 'C20001-4',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 5,
          Rack: 'C20001-5',
          Calibrator: '',
          Code: '',
          logid: ''
        }
      ],
      z1data: [
        {
          id: 1,
          Calibrator: 'QC',
          Code: '00301',
          logid: 'C001'
        },
        {
          id: 2,
          Calibrator: 'QC',
          Code: '00302',
          logid: 'C001'
        },
        {
          id: 3,
          Calibrator: 'QC',
          Code: '00303',
          logid: 'C001'
        },
        {
          id: 4,
          Calibrator: 'QC',
          Code: '00304',
          logid: 'C001'
        },
        {
          id: 5,
          Calibrator: 'QC',
          Code: '00305',
          logid: 'C001'
        }
      ],
      y1data: [
        {
          id: 1,
          Rack: 'Q30001-1',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 2,
          Rack: 'Q30001-2',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 3,
          Rack: 'Q30001-3',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 4,
          Rack: 'Q30001-4',
          Calibrator: '',
          Code: '',
          logid: ''
        },
        {
          id: 5,
          Rack: 'Q30001-5',
          Calibrator: '',
          Code: '',
          logid: ''
        }
      ],
      options: [
        {
          value: 'Ser/PI',
          label: 'Ser/PI'
        },
        {
          value: 'Ser/PI',
          label: 'Ser/PI'
        }
      ],
      value: 'Ser/PI',
      SampleID: '',
      radio: '1',
      Sequence: '',
      Rack: '',
      POS: '',
      checked: true,
      seedata: [
        {
          id: 1,
          name: 'Sheet 1'
        },
        {
          id: 2,
          name: 'Sheet 2'
        },
        {
          id: 3,
          name: 'Sheet 3'
        },
        {
          id: 4,
          name: 'Sheet 4'
        },
        {
          id: 5,
          name: 'Sheet 5'
        },
        {
          id: 6,
          name: 'Sheet 6'
        }
      ],
      seeitemid: 1,
      wldata: [
        {
          id: 1,
          No: '1',
          Maintenance: 'Maintenance'
        },
        {
          id: 2,
          No: '2',
          Maintenance: 'Check'
        },
        {
          id: 3,
          No: '3',
          Maintenance: ''
        },
        {
          id: 4,
          No: '4',
          Maintenance: 'Power On'
        },
        {
          id: 5,
          No: '5',
          Maintenance: 'Power Off'
        },
        {
          id: 6,
          No: '6',
          Maintenance: 'Weekly'
        },
        {
          id: 7,
          No: '7',
          Maintenance: 'ISE'
        }
      ],
      wrdata: [
        {
          id: 1,
          No: '1',
          Module: '751',
          Maintenance: 'Reset',
          Data: '2018/5/5'
        },
        {
          id: 2,
          No: '2',
          Module: '',
          Maintenance: 'Rack Reset',
          Data: '2018/5/5'
        },
        {
          id: 3,
          No: '3',
          Module: '75',
          Maintenance: 'Photometer Check',
          Data: '2018/5/5'
        },
        {
          id: 4,
          No: '4',
          Module: '75',
          Maintenance: 'Cell Blank Measurement',
          Data: '2018/5/5'
        },
        {
          id: 5,
          No: '5',
          Module: '75',
          Maintenance: 'Incubation Water Exchange',
          Data: '2018/5/5'
        },
        {
          id: 6,
          No: '6',
          Module: '751',
          Maintenance: 'Air Purge',
          Data: '2018/5/5'
        },
        {
          id: 7,
          No: '7',
          Module: '75',
          Maintenance: 'Wash Reaction Parts',
          Data: '2018/5/5'
        },
        {
          id: 8,
          No: '8',
          Module: '1',
          Maintenance: 'Reagent Prime',
          Data: '2018/5/5'
        },
        {
          id: 9,
          No: '9',
          Module: '75',
          Maintenance: 'Cell Detergent Prime',
          Data: '2018/5/5'
        },
        {
          id: 10,
          No: '10',
          Module: '75',
          Maintenance: 'Incubator Bath Cleaning',
          Data: '2018/5/5'
        },
        {
          id: 11,
          No: '11',
          Module: '751',
          Maintenance: 'Manual Cleaning',
          Data: '2018/5/5'
        },
        {
          id: 12,
          No: '12',
          Module: '75',
          Maintenance: 'Change Reaction Cell',
          Data: '2018/5/5'
        },
        {
          id: 13,
          No: '13',
          Module: '35',
          Maintenance: 'Power Off',
          Data: '2018/5/5'
        }
      ],
      zids: 0,
      yids: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    eritem: {
      handler(i) {
        console.log('观察到数据变化', i)
        this.eritems = i
        this.bztext = ''
        this.dltext = ''
      },
      immediate: true,
      deep: true
    },
    eritems: {
      handler(i) {
        console.log('现在小步骤', i)
        this.bztext = ''
        this.tipstext = ''
        this.xlid = 0
        clearTimeout(this.timer)
        this.rest()
        if (i == 10.61) {
          // this.eritemfn(11)
          this.timer = setTimeout(() => {
            this.eritemfn(11)
            clearTimeout(this.timer)
          }, 1000)
        }
        if (i >= 10 && i <= 11) {
          this.rest()
        }
        if (i == 8.822) {
          this.xlid = 2
        }
        if (i == 8.821) {
          this.xlid = 2
        }

        if (i == 4) {
          this.bztext =
            '根据“DailyMaintenance”按钮颜色提示(灰色正常，黄色提示，红色失败)，检查保养工作是否完成'
          this.timer = setTimeout(() => {
            this.dltext =
              '开机保养已完成(开机后仪器自动执行) 保养项目包括空气排空、试剂灌注、孵育池水更换、光密度计检查。'
            clearTimeout(this.timer)
          }, 2000)
        }
        if (i == 5) {
          this.bztext =
            '根据"ReagentPreparing”按钮颜色提示(灰色正常紫色/黄色检测量不足，红色有试剂用完)，检查试剂是否充足'
          this.timer = setTimeout(() => {
            this.dltext = '部分试剂已用完，请查看需要更换的试剂'
            clearTimeout(this.timer)
          }, 2000)
        }
        if (i == 5.1) {
          this.bztext =
            '点击“Reagent”菜单，选择“Status”子菜单，查看需要更换的试剂'
        }
        if (i == 5.3) {
          this.dltext = '已获取需要更换的试剂清单，开始更换试剂'
        }
        if (i == 8 && this.sjstep == 2) {
          this.bztext = '点击Calibration菜单下的Install子菜单，打开校准设置界面'
        }
        if (i == 8.2) {
          this.bztext = '点击Download，打开参数下载界面'
        }
        if (i == 8.3) {
          this.bztext = '输入C001号，点击Search进行查找'
        }
        if (i == 8.4) {
          this.bztext = '已勾选需要下载的参数列表，点击Download下载参数'
        }
        if (i == 8.5) {
          this.bztext =
            '点击Calibration菜单下的Calibrators子菜单，打开定标液界面'
        }
        if (i == 8.7) {
          this.dltext =
            '确认校准架左侧的编号(如C001，对应软件上的C20001)，确认校准品在校准架上的位置(从左往右数分别为1-5)'
        }
        if (i == 9.42) {
          this.dltext =
            '确认质控架编号及质控品位置:确认质控架左侧的编号(如Q001对应软件上的Q30001)，确认质控品在质控架上的位置(从左往右数分别为1-5)'
        }
        if (i == 8.71) {
          this.tipstext = '已确定校准架编号'
          this.timer = setTimeout(() => {
            this.eritems = 8.72
          }, 1000)
        }
        if (i == 8.72) {
          this.bztext = '在左侧列表中选中刚刚添加的定标液项'
          // if (this.$refs['zrow1'][0] != undefined) {
          this.$refs['zrow1'][0].classList.add('tml')
          // }
        }

        if (i == 8.8) {
          this.bztext = '点击Calibration菜单下的Status子菜单，打开定标状态界面'
        }
        if (i == 8.9) {
          this.bztext = '选中需要查看的项目'
        }
        if (i == 8.91) {
          this.bztext = '点击的CalibrationResult，在弹出的窗口中查看定标结果'
        }
        if (i == 8.92) {
          this.bztext = '查看完成点击Cancel按钮退出'
        }
        if (i == 9.02) {
          this.bztext =
            '点击QC菜单点击QC菜单下的Install子菜单，打开质控设置界面'
        }
        if (i == 9.1) {
          this.bztext = '点击Download按钮，打开参数下载界面'
        }
        if (i == 9.2) {
          this.bztext = '输入C001号，点击Search进行查找'
        }
        if (i == 9.3) {
          this.bztext = '已勾选需要下载的参数列表，点击Download下载参'
        }
        if (i == 9.4) {
          this.bztext = '点击QC菜单下的Controls子菜单，打开质控品界面'
        }
        if (i == 9.41) {
          this.bztext = '点击RackAssing按钮，打开质控品分配界面'
        }
        if (i == 9.43) {
          this.bztext = '点击QC菜单下的Status子菜单，打开质控状态界面'
        }
        if (i == 9.44) {
          this.bztext = '点击Routine QC Assign按钮，勾选常规质控项目'
        }
        if (i == 9.45) {
          this.bztext = '点击Save按钮保存设置'
        }
        if (i == 9.46) {
          this.tipstext = '已勾选常规质控项目'
          this.timer = setTimeout(() => {
            this.tipstext = ''
            this.sjstepfn(5)
            clearTimeout(this.timer)
          }, 500)
        }
        if (i == 9.8) {
          this.bztext =
            '点击QC菜单下的RunStatus子菜单，打开质控结果界面，查看质控项目是否在控'
        }
        if (i == 9.81) {
          this.timer = setTimeout(() => {
            this.tipstext = '质控项目都在控'
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
              this.tipstext = ''
              this.eritemfn(10)
              clearTimeout(this.timer)
            }, 1000)
          }, 500)
        }
        if (i == 10) {
          this.bztext =
            '点击Workplace菜单下的TestSelection子菜单，打开项目选择界面'
        }
        if (i == 10.1) {
          this.dltext =
            '确认标本架左侧的编号(如5001，对应软件上的50001)，确认标本在标本架上的位置(从左往右数分别为1-5)'
        }
        if (i == 10.2) {
          this.bztext =
            '标本号为5001，标本序咧号为1，标本架编号为1，标本位置编号为1'
          this.$refs.SampleID.classList.add('tm')
          this.$refs.Sequencebox.classList.add('tm')
          this.$refs.Rack.classList.add('tm')
          this.$refs.POS.classList.add('tm')
        }
        if (i == 10.21) {
          this.bztext =
            '当前标本需要检验“肝功”，请点击Sheet1选项卡下的G11快速选择项目。'
          this.timer = setTimeout(() => {
            this.$refs.G11.classList.add('tm')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 10.22) {
          this.bztext = '点击选择项目后Repeat按钮'
          this.$refs.G11.classList.remove('tm')
          this.$refs.Repeat.classList.add('tm')
        }
        if (i == 10.23) {
          this.bztext = '点击选择项目后Repeat按钮'
          this.$refs.Repeat.classList.add('tm')
          this.$refs.S3.classList.remove('tm')
        }
        if (i == 10.24) {
          this.bztext = '点击选择项目后Repeat按钮'
          this.$refs.Repeat.classList.add('tm')
          this.$refs.GLUC3.classList.remove('tm')
        }
        if (i == 10.25) {
          this.bztext = '点击选择项目后Repeat按钮'
          this.$refs.G11.classList.remove('tm')
          this.$refs.Repeat.classList.add('tm')
        }
        if (i == 10.26) {
          this.bztext = '点击选择项目后Repeat按钮'
          this.$refs.G11.classList.remove('tm')
          this.$refs.Repeat.classList.add('tm')
        }
        if (i == 10.27) {
          this.$refs.saves.classList.remove('tm')
          this.tipstext = '项目保存完成'
          this.timer = setTimeout(() => {
            this.tipstext = ''
            clearTimeout(this.timer)
            this.sjstepfn(3)
          }, 500)
        }
        if (i == 10.6) {
          this.bztext =
            '点击Workplace菜单下的DataReview子菜单，打开标本分析结果界面'
        }
        if (i == 10.61) {
          this.tipstext = '请详细查看分析结果'
          this.timer = setTimeout(() => {
            this.tipstext = ''
            clearTimeout(this.timer)
          }, 500)
        }
        if (i == 12) {
          this.bztext = '点击Utility菜单下的Maintenance子菜单打开保养界面'
        }
        if (i == 12.1) {
          this.bztext = '选中左侧列表中的Maintenance项，显示保养项目'

          this.timer = setTimeout(() => {
            this.$refs['zrows1'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 12.2) {
          this.bztext = '选中右侧列表中的ManualCleaning项'
          this.timer = setTimeout(() => {
            this.$refs['yrows11'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 12.3) {
          this.bztext = '选中左侧列表中的Maintenance项，显示保养项目'
          this.timer = setTimeout(() => {
            this.$refs['zrows1'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 12.31) {
          if (this.$refs['zrows1'][0]) {
            this.$refs['zrows1'][0].classList.remove('tml')
          }

          this.bztext = '选中右侧列表中的ManualCleaning项'
          this.timer = setTimeout(() => {
            this.$refs['yrows11'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 12.32) {
          if (this.$refs['yrows11'][0]) {
            this.$refs['yrows11'][0].classList.remove('tml')
          }
          this.tipstext = '已关闭人工清洁程序'
          this.timer = setTimeout(() => {
            this.sjstepfn(4)
            clearTimeout(this.timer)
          }, 1000)
        }
        if (i == 12.4) {
          this.bztext = '选中左侧列表中的Maintenance项，显示保养项目'
          this.timer = setTimeout(() => {
            this.$refs['zrows1'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 12.41) {
          this.bztext = '选中右侧列表中的Reset项'
          this.timer = setTimeout(() => {
            this.$refs['yrows1'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 13) {
          this.bztext = '选中左侧列表中的PowerOff项'
          this.timer = setTimeout(() => {
            this.$refs['zrows5'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 13.1) {
          this.bztext = '选中右侧列表中的PowerOff项'
          this.timer = setTimeout(() => {
            this.$refs['yrows13'][0].classList.add('tml')
            clearTimeout(this.timer)
          }, 0)
        }
        if (i == 13.2) {
          this.bztext = '点击右侧的Logoff按钮，安全退出软件'
        }
      },
      immediate: true,
      deep: true
    },
    sjstep: {
      handler(i) {
        console.log('当前三级步骤', i, this.sjname)
        // if (this.eritems >= 8 && this.eritems <= 8.5 && i == 2) {
        //   this.eritemfn(8)
        // }
        if (i == 1 && this.sjname == '校准定标') {
          // console.log('执行了1s')
          this.$emit('eritemfns', 8) // 重置三级菜单初始状态
        }
        if (i == 2 && this.sjname == '校准定标') {
          console.log('执行了1s')
          this.$emit('eritemfns', 8)
        }
        if (i == 3 && this.sjname == '校准定标') {
          console.log('执行了1s')
          this.$emit('eritemfns', 8.5)
        }
        if (i == 4 && this.sjname == '校准定标') {
          console.log('执行了1s')
          this.$emit('eritemfns', 8.8)
        }
        if (i == 5 && this.sjname == '校准定标') {
          console.log('执行了1s')
          this.$emit('eritemfns', 9999)
        }

        if (i == 6 && this.sjname == '校准定标') {
          console.log('执行了1s')
          this.$emit('eritemfns', 9999)
        }
        if (i == 7 && this.sjname == '校准定标') {
          console.log('执行了1s')
          this.$emit('eritemfns', 9999)
        }
        if (i == 8 && this.sjname == '校准定标') {
          console.log('执行了重置')
          this.$emit('eritemfns', 8.9)
        }
        if (i == 1 && this.sjname == '质控') {
          this.$emit('eritemfns', 999)
        }
        if (i == 2 && this.sjname == '质控') {
          this.$emit('eritemfns', 9.02)
        }
        if (i == 3 && this.sjname == '质控') {
          this.$emit('eritemfns', 9.4)
        }
        if (i == 4 && this.sjname == '质控') {
          this.$emit('eritemfns', 9.43)
        }
        if (i == 5 && this.sjname == '质控') {
          this.$emit('eritemfns', 8888)
        }
        if (i == 6 && this.sjname == '质控') {
          this.$emit('eritemfns', 8888)
        }
        if (i == 7 && this.sjname == '质控') {
          this.$emit('eritemfns', 8888)
        }
        if (i == 8 && this.sjname == '质控') {
          this.$emit('eritemfns', 9.8)
        }
        if (i == 1 && this.sjname == '标本分析') {
          this.$emit('eritemfns', 10)
        }
        if (i == 2 && this.sjname == '标本分析') {
          this.$emit('eritemfns', 10.2)
        }
        if (i == 3 && this.sjname == '标本分析') {
          this.$emit('eritemfns', 999)
        }
        if (i == 4 && this.sjname == '标本分析') {
          this.$emit('eritemfns', 999)
        }
        if (i == 5 && this.sjname == '标本分析') {
          this.$emit('eritemfns', 999)
        }
        if (i == 6 && this.sjname == '标本分析') {
          this.$emit('eritemfns', 10.6)
        }
        if (i == 1 && this.sjname == '常规维护') {
          this.$emit('eritemfns', 12)
        }
        if (i == 2 && this.sjname == '常规维护') {
          this.$emit('eritemfns', 12.21)
        }
        if (i == 3 && this.sjname == '常规维护') {
          this.$emit('eritemfns', 12.3)
        }
        if (i == 4 && this.sjname == '常规维护') {
          this.$emit('eritemfns', 12.4)
        }
      }
    },
    errortext: {
      handler(i) {
        console.log('i', i)
        this.timer = setTimeout(() => {
          this.errortext = ''
          clearTimeout(this.timer)
        }, 1000)
      },
      immediate: true,
      deep: true
    },
    xlid: {
      handler(i) {
        if (i == 2) {
          this.bztext = '点击Save完成校准项目选定'
          this.eritems = 8.822
        }
      },
      immediate: true,
      deep: true
    },
    SampleID: {
      handler(i) {
        if (
          i != '' &&
          this.Sequence != '' &&
          this.Rack != '' &&
          this.POS != '' &&
          this.eritems == 10.2
        ) {
          this.eritems = 10.21
        }
      }
    },
    Sequence: {
      handler(i) {
        if (
          i != '' &&
          this.SampleID != '' &&
          this.Rack != '' &&
          this.POS != '' &&
          this.eritems == 10.2
        ) {
          this.eritems = 10.21
        }
      }
    },
    Rack: {
      handler(i) {
        if (
          i != '' &&
          this.Sequence != '' &&
          this.SampleID != '' &&
          this.POS != '' &&
          this.eritems == 10.2
        ) {
          this.eritems = 10.21
        }
      }
    },
    POS: {
      handler(i) {
        if (
          i != '' &&
          this.Sequence != '' &&
          this.Rack != '' &&
          this.SampleID != '' &&
          this.eritems == 10.2
        ) {
          this.eritems = 10.21
        }
      }
    }
  },
  //方法集合
  methods: {
    logfns() {
      this.tipstext = '程序已安全退出'
      this.timer = setTimeout(() => {
        this.eritemfn(14)
        clearTimeout(this.timer)
      }, 1000)
    },
    slefn() {
      this.$refs.Select.classList.remove('tm')
      if (this.eritems == 12.2) {
        this.tipstext = '已启动人工清洁程序'
        this.timer = setTimeout(() => {
          this.eritems = 12.21
          this.sjstepfn(2)
          clearTimeout(this.timer)
        }, 1000)
      }
      if (this.eritems == 12.41) {
        this.tipstext = '仪器复位程序已执行完成'
        this.timer = setTimeout(() => {
          this.eritemfn(13)
          clearTimeout(this.timer)
        }, 1000)
      }
      if (this.eritems == 13.1) {
        this.tipstext = '开始执行关机自动维护'
        this.timer = setTimeout(() => {
          this.tipstext = '关机自动维护已执行完成'

          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.eritems = 13.2
            clearTimeout(this.timer)
          }, 1500)
        }, 1000)
      }
    },
    yidsfn(i) {
      if (i == 11 && this.eritems == 12.2) {
        this.bztext = '点击Select按钮，启动人工清洁程序'
        this.$refs.Select.classList.add('tm')
      }
      if (i == 11 && this.eritems == 12.31) {
        this.bztext = '点击Stop按钮，关闭人工清洁程序'
        this.$refs.stopan.classList.add('tm')
      }
      if (i == 1 && this.eritems == 12.41) {
        this.bztext = '点击Select按钮，开始对整台仪器进行复位'
        this.$refs.Select.classList.add('tm')
      }
      if (i == 13 && this.eritems == 13.1) {
        this.bztext = '点击Select按钮，启动关机自动维护'
        this.$refs.Select.classList.add('tm')
      }
    },
    zidsfn(i) {
      if (i == 1 && this.eritems == 12.1) {
        this.eritems = 12.2
      }
      if (i == 1 && this.eritems == 12.3) {
        this.eritems = 12.31
      }
      if (i == 1 && this.eritems == 12.4) {
        this.eritems = 12.41
      }
      if (i == 5 && this.eritems == 13) {
        this.eritems = 13.1
      }
    },
    // 重制高亮
    rest() {
      console.log('重置', this.$refs['zrow1'])
      if (this.$refs['zrow1'] != undefined && this.$refs['zrow1'].length != 0) {
        this.$refs['zrow1'][0].classList.remove('tml')
      }
      if (
        this.$refs['zrows1'] != undefined &&
        this.$refs['zrows1'].length != 0
      ) {
        this.$refs['zrows1'][0].classList.remove('tml')
      }
      if (
        this.$refs['yrows11'] != undefined &&
        this.$refs['yrows11'].length != 0
      ) {
        // console.log('走这个接口')

        this.$refs['yrows11'][0].classList.remove('tml')
      }
      if (
        this.$refs['yrows1'] != undefined &&
        this.$refs['yrows1'].length != 0
      ) {
        this.$refs['yrows1'][0].classList.remove('tml')
      }
      if (
        this.$refs['zrows5'] != undefined &&
        this.$refs['zrows5'].length != 0
      ) {
        this.$refs['zrows5'][0].classList.remove('tml')
      }
      if (
        this.$refs['yrows13'] != undefined &&
        this.$refs['yrows13'].length != 0
      ) {
        this.$refs['yrows13'][0].classList.remove('tml')
      }

      if (this.$refs.Select) {
        this.$refs.Select.classList.remove('tm')
      }
      if (this.$refs.stopan) {
        this.$refs.stopan.classList.remove('tm')
      }

      if (this.$refs.GLUC3) {
        this.$refs.GLUC3.classList.remove('tm')
      }
      // 以上新增清楚样式
      if (this.$refs.SampleID) {
        this.$refs.SampleID.classList.remove('tm')
      }
      if (this.$refs.Sequencebox) {
        this.$refs.Sequencebox.classList.remove('tm')
      }
      if (this.$refs.Rack) {
        this.$refs.Rack.classList.remove('tm')
      }
      if (this.$refs.POS) {
        this.$refs.POS.classList.remove('tm')
      }
      if (this.$refs.saves) {
        this.$refs.saves.classList.remove('tm')
      }
      if (this.$refs.G11) {
        this.$refs.G11.classList.remove('tm')
      }
      if (this.$refs.Repeat) {
        this.$refs.Repeat.classList.remove('tm')
      }
      if (this.$refs.S3) {
        this.$refs.S3.classList.remove('tm')
      }
    },
    repeatfn() {
      this.$refs.Repeat.classList.remove('tm')

      if (this.eritems == 10.22) {
        this.tipstext = '标本编辑成功，开始编辑下一个'
        this.SampleID = 5002
        this.Sequence = 2
        this.Rack = 1
        this.POS = 2
        this.bztext = '当前标本需要检验“肾功”，请Sheet2选项卡下的S3'
        this.seeitemid = 2
        this.timer = setTimeout(() => {
          this.tipstext = ''
          this.$refs.S3.classList.add('tm')
          clearTimeout(this.timer)
        }, 500)
      }
      if (this.eritems == 10.23) {
        this.tipstext = '标本编辑成功，开始编辑下一个'
        this.SampleID = 5003
        this.Sequence = 3
        this.Rack = 1
        this.POS = 3
        this.seeitemid = 1
        this.$refs.S3.classList.remove('tm')
        this.timer = setTimeout(() => {
          this.tipstext = ''
          this.bztext =
            '当前标本需要检验“血糖”，请选择Sheet1选项卡中的GLUC3项目'

          this.$refs.GLUC3.classList.add('tm')
          clearTimeout(this.timer)
        }, 500)
      }
      if (this.eritems == 10.24) {
        this.SampleID = 5004
        this.Sequence = 4
        this.Rack = 1
        this.POS = 4
        this.seeitemid = 1
        this.tipstext = '标本编辑成功，开始编辑下一个'
        this.timer = setTimeout(() => {
          this.tipstext = ''
          this.bztext =
            '当前标本需要检验“肝功”，请点击Sheet1选项卡下的G11快速选择项目。'
          this.$refs.G11.classList.add('tm')
          clearTimeout(this.timer)
        }, 500)
      }
      if (this.eritems == 10.25) {
        this.$refs.G11.classList.add('tm')
        this.SampleID = 5005
        this.Sequence = 5
        this.Rack = 1
        this.POS = 5
        this.seeitemid = 1
        this.tipstext = '标本编辑成功，开始编辑下一个'
        this.timer = setTimeout(() => {
          this.tipstext = ''
          this.bztext =
            '当前标本需要检验“肝功”，请点击Sheet1选项卡下的G11快速选择项目。'

          clearTimeout(this.timer)
        }, 500)
      }
      if (this.eritems == 10.26) {
        this.bztext = '已编辑所有标本，请点击Save拨钮保存编辑'
        this.$refs.saves.classList.add('tm')
      }
    },
    focusfn() {
      this.$refs.SampleID.classList.remove('tm')
      this.$refs.Sequencebox.classList.remove('tm')
      this.$refs.Rack.classList.remove('tm')
      this.$refs.POS.classList.remove('tm')
    },
    okfn() {
      // 创建一个函数来比较 Calibrator、Code 和 logid 的值是否相等
      function compareValues(zItem, yItem) {
        return (
          zItem.Calibrator === yItem.Calibrator &&
          zItem.Code === yItem.Code &&
          zItem.logid === yItem.logid
        )
      }

      // 使用 every 方法来检查是否所有相同 id 的元素都满足条件
      let result = this.zdata.every((zItem) => {
        // 找到 ydata 中与当前 zItem 具有相同 id 的元素
        let yItem = this.ydata.find((y) => y.id === zItem.id)

        // 如果找到了匹配的元素，并且比较结果为 false，则返回 false
        return yItem && compareValues(zItem, yItem)
      })
      if (result) {
        this.tipstext = '已完成定标液分配'
        this.timer = setTimeout(() => {
          this.eritems = 8.8
          this.sjstepfn(4)
        }, 1000)
      } else {
        this.errortext = '定标液项和定标液位置不匹配'
      }
    },
    okfns() {
      // 创建一个函数来比较 Calibrator、Code 和 logid 的值是否相等
      function compareValues(zItem, yItem) {
        return (
          zItem.Calibrator === yItem.Calibrator &&
          zItem.Code === yItem.Code &&
          zItem.logid === yItem.logid
        )
      }

      // 使用 every 方法来检查是否所有相同 id 的元素都满足条件
      let result = this.z1data.every((zItem) => {
        // 找到 ydata 中与当前 zItem 具有相同 id 的元素
        let yItem = this.y1data.find((y) => y.id === zItem.id)

        // 如果找到了匹配的元素，并且比较结果为 false，则返回 false
        return yItem && compareValues(zItem, yItem)
      })
      if (result) {
        this.tipstext = '已完成定标液分配'
        this.timer = setTimeout(() => {
          this.eritems = 9.43
          this.sjstepfn(4)
        }, 1000)
      } else {
        this.errortext = '定标液项和定标液位置不匹配'
      }
    },
    yidfn(i) {
      this.$refs['yrow' + i][0].classList.remove('tml')
      if (i == 1 && this.eritems == 8.721) {
        this.bztext = '点击Add分配定标液'
        this.$refs.ad.classList.add('tml')
        this.eritems = 8.722
      }
      if (i == 1 && this.eritems == 9.42) {
        this.$refs.ad.classList.add('tml')
        this.bztext = '点击Add分配质控品'
      }
    },
    zidfn(i) {
      this.$refs['zrow' + i][0].classList.remove('tml')
      if (i == 1 && this.eritems == 8.72) {
        this.$refs['yrow1'][0].classList.add('tml')
        this.bztext = '在右侧列表中选中对应的定标液位置项'
        this.eritems = 8.721
      }
      if (i == 1 && this.eritems == 9.42) {
        this.$refs['yrow1'][0].classList.add('tml')
        this.bztext = '在右侧列表中选中对应的定标液位置项'
      }
    },
    Removefn() {
      this.yid = 0
    },
    addfn() {
      this.$refs.ad.classList.remove('tml')
      if (this.zid != 0 && this.yid != 0) {
        if (this.zid == this.yid) {
          console.log('移动正确')
          this.ydata[this.yid - 1].Calibrator =
            this.zdata[this.yid - 1].Calibrator
          this.ydata[this.yid - 1].Code = this.zdata[this.yid - 1].Code
          this.ydata[this.yid - 1].logid = this.zdata[this.yid - 1].logid

          this.bztext =
            '按上述步骤，先后点击左、右列表中的定标液项、定标液位置项，点击Add分配剩余的定标液'
        }
      }
      if (this.ydata[4].logid == 'C001') {
        this.bztext = '点击OK按钮完成分配'
        this.$refs.okref.classList.add('tm')
      }
    },
    addfns() {
      this.$refs.ad.classList.remove('tml')
      if (this.zid != 0 && this.yid != 0) {
        if (this.zid == this.yid) {
          console.log('移动正确')
          this.y1data[this.yid - 1].Calibrator =
            this.z1data[this.yid - 1].Calibrator
          this.y1data[this.yid - 1].Code = this.z1data[this.yid - 1].Code
          this.y1data[this.yid - 1].logid = this.z1data[this.yid - 1].logid

          this.bztext =
            '按上述步骤，先后点击左、右列表中的定标液项、定标液位置项，点击Add分配剩余的定标液'
        }
        if (this.ydata[4].logid == 'C001') {
          this.bztext = '点击OK按钮完成分配'
          this.$refs.okref.classList.add('tm')
        }
      }
    },
    dlbot() {
      this.dltext = ''
      if (this.eritems == 4) {
        this.eritemfn(5)
      }
      if (this.eritems == 5) {
        this.eritems = 5.1
      }
      if (this.eritems == 5.3) {
        this.eritemfn(6)
      }
      if (this.eritems == 8.7) {
        this.eritems = 8.71
      }
      if (this.eritems == 9.42) {
        this.tipstext = '已确定质控架编号'
        this.timer = setTimeout(() => {
          this.tipstext = ''
          this.bztext = '在左侧列表中选中刚刚添加的定标液项'
          this.$refs['zrow1'][0].classList.add('tml')
          clearTimeout(this.timer)
        }, 500)
      }
      if (this.eritems == 10.1) {
        this.tipstext = '已确定标本架编号'
        this.timer = setTimeout(() => {
          this.tipstext = ''
          this.eritems == 10.2
          this.sjstepfn(2)
          clearTimeout(this.timer)
        }, 500)
      }
    },
    login() {
      console.log('重生')
      this.loginshow = false
      this.eritemfn(4)
    },
    taskfn(i) {
      this.$emit('taskfn', i)
    },
    eritemfn(i) {
      this.$emit('eritemfn', i)
    },
    sjstepfn(i) {
      console.log('切换三级')
      this.$emit('sjstepfn', i)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style></style>
